<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
       li{
         margin: 2px;
       }
       .active{
         background-color: orange;
         font-size: 22px;
         color: red
       }

    </style>

  </head>
  <script src="./lib/vue.js" charset="utf-8"></script>
  <body>

    <!-- v-bind 可以绑定属性，类，样式 -->
     <div class="box">
        <img v-bind:src='imgUrl' alt="" style="width:80px;hight:80px">
        <ul>
          <li v-for='c in course'  v-bind:class="{active:false}">
             {{c}}
          </li>
        </ul>

        <div v-bind:style="style">hello VUE</div>





     </div>

  </body>

  <script type="text/javascript">
      let vm = new Vue({
        el:'.box',
        data:{
          imgUrl:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1508942188&di=8076867db13c35eac64b8afc743caf8f&src=http://upload.ldnews.cn/2017/1009/1507520530105.jpg',
          course:['oc','java','php','js'],
          style:{color:'red'}

        },
        method:{

        }
      });

  </script>
</html>
